<template>
	<div>
		<van-tree-select
			v-model:main-active-index="activeIndex"
			:items="items"
			style="
				border-top: 1px #e8eaed solid;
				overflow: hidden;
				height: calc(100vh - 160px);
			"
			class="main-active-index"
		>
			<template #content>
				<div v-show="activeIndex === 0" ref="checkbox">
					<van-checkbox-group
						v-model="All"
						@click="checkAll"
						v-if="CountList?.length"
					>
						<van-checkbox
							checked-color="var(--bl-brand-c)"
							:name="1"
							style="
								margin-top: 26px;
								margin-left: 16px;
								align-items: flex-start;
								width: 95%;
							"
							><span class="processName">{{
								$t('pages.task.selectAll', '全选') 
							}}</span>
							<span class="num">{{ allNum }}</span>
						</van-checkbox>
					</van-checkbox-group>
					<van-checkbox-group
						v-model="checked"
						ref="checkboxGroup"
						v-if="CountList?.length"
					>
						<van-checkbox
							checked-color="var(--bl-brand-c)"
							:name="i.process_key"
							@click="All = []"
							v-for="i in CountList"
							:key="i"
							style="
								margin-top: 26px;
								margin-left: 16px;
								align-items: flex-start;
								width: 95%;
							"
						>
							<span class="processName">{{ i.process_name }}</span>
							<span class="num">{{ i.count }}</span></van-checkbox
						>
					</van-checkbox-group>
					<ZeroData :drafts="false" v-if="!CountList?.length" />
				</div>
				<van-radio-group v-model="sort" v-if="activeIndex === 1">
					<van-radio
						name="desc"
						style="margin-top: 26px; margin-left: 16px"
						checked-color="var(--bl-brand-c)"
						>{{ $t('approval.LatestPriority', '最新发起优先') }}</van-radio
					>
					<van-radio
						name="asc"
						style="margin-top: 26px; margin-left: 16px"
						checked-color="var(--bl-brand-c)"
						>{{ $t('approval.EarliestPriority', '最早发起优先') }}</van-radio
					>
				</van-radio-group>
			</template>
		</van-tree-select>
		<div class="buttonAndShadow">
			<div class="box-shadow" ref="boxShadow"></div>
			<div class="button">
				<button class="canvel" @click="canvel">
					{{ $t('common.Reset', '重置') }}
				</button>
				<button class="ok" @click="ok">
					{{ $t('common.Determine', '确定') }}
				</button>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch, computed } from 'vue'
import { getCount } from '../serve/api'
// import { t } from '@/entry_mobile/locales'
import { i18n } from '@/locales'
const { $t } = i18n
import ZeroData from './zeroData.vue'
const emit = defineEmits(['close', 'ok'])
const props = defineProps(['nowindex', 'screenList', 'emitSort'])
const activeIndex = ref(0)
const items = [
	{ text: $t('approval.ProcessName', '流程名称') },
	{ text: $t('approval.Priority', '优先顺序') },
]
const CountList: any = ref([])
const checked = ref([])
const All: any = ref([1])
const sort = ref('desc')
const checkbox = ref()
const boxShadow = ref()
const checkboxGroup: any = ref(null)
const checkAll = () => {
	if (!All.value?.length) {
		checkboxGroup.value.toggleAll()
	} else {
		checkboxGroup.value.toggleAll(true)
	}
}
const allNum = computed(() => {
	let num = 0
	CountList.value.forEach((item: any) => {
		num = num + item.count
	})
	return num
})

onMounted(async () => {
	let vanSidebarItem = document.getElementsByClassName('van-sidebar-item__text')
	checkbox.value.parentNode.addEventListener('scroll', (e: any) => {
		var scrollTop = e.target.scrollTop
		var windowHeight = e.target.clientHeight
		var scrollHeight = e.target.scrollHeight
		if (scrollTop + windowHeight >= scrollHeight - 10) {
			boxShadow.value.style.display = 'none'
		} else {
			boxShadow.value.style.display = 'block'
		}
	})
	CountList.value = await getCount()
	CountList.value.forEach((i: any) => {
		checked.value.push(i.process_key)
	})
	vanSidebarItem[0].setAttribute(
		'data-content',
		All.value?.length
			? $t('pages.task.AllProcesses', '全部流程')
			: `${checked.value?.length}${$t('pages.task.Processes', '个流程')}`
	)
	vanSidebarItem[1].setAttribute(
		'sort-content',
		sort.value === 'asc'
			? $t('approval.EarliestInitiation', '最早发起')
			: $t('approval.LatestLaunch', '最新发起')
	)
})
//全选回显使用选中的长度和后端的长度判断
watch(
	checked,
	() => {
		if (checked.value?.length === CountList.value?.length) {
			All.value = [1]
		}
		let vanSidebarItem = document.getElementsByClassName(
			'van-sidebar-item__text'
		)[0]
		vanSidebarItem.setAttribute(
			'data-content',
			All.value?.length
				? $t('pages.task.AllProcesses', '全部流程')
				: `${checked.value?.length}${$t('pages.task.Processes', '个流程')}`
		)
	},
	{ deep: true }
)
watch(sort, () => {
	let vanSidebarItem = document.getElementsByClassName(
		'van-sidebar-item__text'
	)[1]
	vanSidebarItem.setAttribute(
		'sort-content',
		sort.value === 'asc'
		? $t('approval.EarliestInitiation', '最早发起')
			: $t('approval.LatestLaunch', '最新发起')

	)
})
const canvel = async () => {
	All.value = [1]
	checkboxGroup.value.toggleAll(true)
	sort.value = 'desc'
}

const ok = () => {
	//调接口
	emit('ok', checked.value, sort.value)
}
</script>

<style lang="less" scoped>
/deep/.van-sidebar-item--select::before {
	background: var(--bl-brand-c);
	height: 14px;
	width: 3px;
	border-radius: 20px;
}
/deep/ .van-checkbox__label {
	display: flex;
	flex-grow: 1;
	justify-content: space-between;
	width: 89%;
}
.num {
	margin-right: 15px;
	color: #1f2329;
	font-family: PingFang SC;
	font-size: 14px;
	font-weight: 400;
}
.buttonAndShadow {
	position: absolute;
	top: 100%;
	transform: translateY(-100%);
	width: 100vw;
}
.button {
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 85px;
	border-top: 1px solid #e8eaed;
	.ok {
		font-family: PingFang SC;
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
		color: #fff;
		border: 0;
		height: 40px;
		width: 210px;
		background: var(--bl-brand-c);
		border-radius: 4px;
		margin-left: 8px;
	}
	.canvel {
		height: 40px;
		width: 100px;
		border-radius: 4px;
		border: 1px solid #dee0e3;
		background: #fff;
		font-family: PingFang SC;
		font-size: 16px;
		font-weight: 400;
		color: #1f2329;
	}
}
.box-shadow {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
	height: 76px;
	width: 100%;
}
.main-active-index {
	/deep/.van-sidebar-item:nth-child(1) {
		.van-sidebar-item__text {
			display: flex;
			flex-direction: column;
			align-items: center;
			&::after {
				height: 15px;
				// width: 56px;
				max-width: 75px;
				padding: 0 5px;
				margin-top: 8px;
				background: #f2f4f7;
				font-family: PingFang SC;
				font-size: 10px;
				font-weight: 400;
				line-height: 15px;
				color: #8f959e;
				text-align: center;
				border-radius: 20px;
				content: attr(data-content);
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}
		}
	}
	/deep/.van-sidebar-item:nth-child(2) {
		.van-sidebar-item__text {
			display: flex;
			flex-direction: column;
			align-items: center;
			&::after {
				height: 15px;
				width: 56px;
				margin-top: 8px;
				background: #f2f4f7;
				font-family: PingFang SC;
				font-size: 10px;
				font-weight: 400;
				line-height: 15px;
				color: #8f959e;
				text-align: center;
				border-radius: 20px;
				content: attr(sort-content);
			}
		}
	}
}
.processName {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 80%;
}
</style>
